
<div class="page">

    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Buttons</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="btn-w-md">Default</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-primary">Primary</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-accent">Accent</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-accent"><span class="glyphicon glyphicon-headphones"></span> With Icon</md-button><div class="divider"></div>
                            <md-button class="btn-w-md md-warn">Warn</md-button><div class="divider"></div>
                            <md-button ng-disabled="true" class="btn-w-md md-primary">Disabled</md-button><div class="divider"></div>
                            <div class="panel-label">Flat Buttons</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-w-md">Default</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-primary">Primary</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-accent">Accent</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-accent"><span class="glyphicon glyphicon-headphones"></span> With Icon</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-warn">Warn</md-button><div class="divider"></div>
                            <md-button ng-disabled="true" class="btn-w-md md-primary">Disabled</md-button><div class="divider"></div>
                            <div class="panel-label">Raised Buttons</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-fab" aria-label="headphones"><span class="glyphicon glyphicon-headphones"></span></md-button><div class="divider"></div>
                            <md-button class="md-fab md-primary" aria-label="headphones"><span class="glyphicon glyphicon-headphones"></span></md-button><div class="divider"></div>
                            <md-button class="md-fab md-warn" aria-label="headphones"><span class="glyphicon glyphicon-headphones"></span></md-button><div class="divider"></div>
                            <md-button ng-disabled="true" class="md-fab" aria-label="headphones"><span class="glyphicon glyphicon-headphones"></span></md-button><div class="divider"></div>
                            <div class="panel-label">FAB</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row ui-section">
        <div class="col-lg-8 clearfix">
            <h2 class="section-header">Buttons Variables</h2>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-w-xs">xs</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-sm md-primary">small</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-md md-accent">middle</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-accent">large</md-button><div class="divider"></div>
                            <div class="panel-label">Width</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-xs">Extra small</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-sm md-primary">Small Button</md-button><div class="divider"></div>
                            <md-button class="md-raised md-accent">Default button</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-lg md-accent">Large button</md-button><div class="divider"></div>      
                            <div class="panel-label">Sizes</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <div class="divider"></div>
                            <p>
                                <md-button aria-label="headphones" class="md-fab md-warn md-fab-xs"><span class="glyphicon glyphicon-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab md-primary md-fab-sm"><span class="glyphicon glyphicon-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab"><span class="glyphicon glyphicon-headphones"></span></md-button>
                            </p>
                            <div class="divider divider-lg"></div>
                            <p>
                                <md-button aria-label="headphones" class="md-fab"><span class="glyphicon glyphicon-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab md-primary md-fab-sm"><span class="glyphicon glyphicon-headphones"></span></md-button> <span class="space"></span>
                                <md-button aria-label="headphones" class="md-fab md-warn md-fab-xs"><span class="glyphicon glyphicon-headphones"></span></md-button>
                            </p>
                            <div class="divider"></div>
                            <div class="panel-label">Floating</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <md-button class="md-raised btn-w-lg">Default</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-primary">Primary</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-accent">Accent</md-button><div class="divider"></div>
                            <md-button class="md-raised btn-w-lg md-warn">Warn</md-button><div class="divider"></div>
                            <div class="panel-label">Colors</div>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">

                            <div class="btn-group" dropdown is-open="status.isopen1">
                                <button ui-wave type="button" class="btn btn-raised btn-w-lg btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> Action <span class="caret"></span> </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="javascript:;">Action</a></li>
                                    <li><a href="javascript:;">Another action</a></li>
                                    <li><a href="javascript:;">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="javascript:;">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="divider"></div>
                            <div class="btn-group btn-raised" dropdown is-open="status.isopen3">
                                <button ui-wave type="button" class="btn btn-w-md btn-info"> Action</button>
                                <button ui-wave type="button" class="btn btn-info dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="javascript:;">Action</a></li>
                                    <li><a href="javascript:;">Another action</a></li>
                                    <li><a href="javascript:;">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="javascript:;">Separated link</a></li>
                                </ul>
                            </div>

                            <div class="divider"></div>

                            <div class="btn-group btn-raised dropup" dropdown is-open="status.isopen11">
                                <button ui-wave type="button" class="btn btn-success btn-w-md">Left Dropup</button>
                                <button ui-wave type="button" class="btn btn-success dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;">Action</a></li>
                                    <li><a href="javascript:;">Another action</a></li>
                                    <li><a href="javascript:;">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="javascript:;">Separated link</a></li>
                                </ul>
                            </div>
                            <div class="divider"></div>
                            <div class="btn-group btn-raised dropup" dropdown is-open="status.isopen12">
                                <button ui-wave type="button" class="btn btn btn-w-md btn-primary">Right Dropup</button>
                                <button ui-wave type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                                    <span class="caret"></span>
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <ul class="dropdown-menu pull-right">
                                    <li><a href="javascript:;">Action</a></li>
                                    <li><a href="javascript:;">Another action</a></li>
                                    <li><a href="javascript:;">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="javascript:;">Separated link</a></li>
                                </ul>
                            </div>
                          
                            <div class="panel-label">Dropdowns</div>
                        </div>
                    </div>                    
                </div>
                <div class="col-md-4">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body text-center">
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-twitter"><i class="fa fa-twitter"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-facebook"><i class="fa fa-facebook"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-google-plus"><i class="fa fa-google"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-pinterest"><i class="fa fa-pinterest"></i></a>

                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-instagram"><i class="fa fa-instagram"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-rss"><i class="fa fa-rss"></i></a>
                            </p>
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-tumblr"><i class="fa fa-tumblr"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-linkedin"><i class="fa fa-linkedin"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-dribbble"><i class="fa fa-dribbble"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-youtube"><i class="fa fa-youtube"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-github"><i class="fa fa-github"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-sm btn-skype"><i class="fa fa-skype"></i></a>
                            </p> 
                            <div class="divider"></div>
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-twitter"><i class="fa fa-twitter"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-facebook"><i class="fa fa-facebook"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-google-plus"><i class="fa fa-google"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-pinterest"><i class="fa fa-pinterest"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-instagram"><i class="fa fa-instagram"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-rss"><i class="fa fa-rss"></i></a>
                            </p>
                            <p>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-tumblr"><i class="fa fa-tumblr"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-linkedin"><i class="fa fa-linkedin"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-dribbble"><i class="fa fa-dribbble"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-youtube"><i class="fa fa-youtube"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-github"><i class="fa fa-github"></i></a>
                                <a ui-wave href="javascript:;" class="btn-icon btn-icon-round btn-icon-sm btn-skype"><i class="fa fa-skype"></i></a>
                            </p>   
                            <div class="panel-label">Social icons</div>
                        </div>
                    </div>                    
                </div>
            </div>

        </div>
    </div>

</div>
